<#include '/admin/header.html' >

	<style type="text/css">
		.updatetr tr{
          float: left;
          line-height: 47px;
		}
		.table tbody{
			float: right;
		}
		tr td{
			padding-right: 25px;
			 white-space:nowrap;
		}
	</style>
<div class="admin-main" >
	<script type="text/javascript" src="${ctx}/statics/e_tools/js/jquery.goodsCatsSelect.js"></script>
	<form id="priceForm" >
	<div class="table_control">
	<div class="shadowBoxWhite whiteBox">
		<table cellpadding="6" width="100%" class="updatetr" >
			<tr>
				<td width="100px" align="right" style="padding-top: 3px;">
					商品分类:
				</td>
				<td width="200px" >
					<input type="text" id="cat_name" value="" style="width: 200px;height: 25px" />
					<input type="hidden" id="cat_id" name="cat_id" value="" />
				</td>
				<td width="100px">
					按订单周期：
				</td>
				<td width="90px" >
					<select id="cycle_type" name="cycle_type" style="height: 30px">
						<option value="1">按照月统计</option>
						<option value="0">按照年统计</option>
					</select>
				</td>
				<td width="70px" >
					<select id="year" style="height: 30px">
					</select>
				</td>
				<td width="70px" >
					<select id="month" style="height: 30px;">
					</select>
				</td>
				<td width="200px" style="text-align: center;height: 30px">
						<a id="search_statis"  href="javascript:void(0);" onclick="search_statis()"	class="layui-btn layui-btn-normal layui-btn-small">开始搜索</a>
				</td>
				<td>
				</td>
			</tr>
		</table>
	</div>
	</div>
	<div class="clear height10"></div>
	<div id="main" style="height:400px;"></div>
	<div class="shadowBoxWhite whiteBox" >
		<table>
			<tr> 
				<td width="200px;">
					<input type="button" class="button" value="设置价格区间" id="dlg" style="width: 120px;height: 30px;left: 100px;cursor: pointer;" >
				</td>
			</tr>
		</table>
	</div>
	<div class="shadowBoxWhite whiteBox" style="width: 100%; heigh: 600px">
		<table class="form-table" style="width: 100%; height: 300px">
			<tr>
				<td>
					<div id="container" style="width: 100%; min-width: 310px; height: 400px; margin: 0 auto"></div>
				</td>
			</tr>
		</table>
	</div>
	
	<div   title="设置价格区间" closed="true" style="width:400px;height:230px;padding:10px" buttons="#dlg-buttons" >
		<ul>
			<li><input class="minPrice_1" style="width: 80px;" type="hidden" name="minPrice" value="0" ><input class="maxPrice_1" style="width: 80px;" type="hidden" name="maxPrice" value="100"></li>
			<li><input class="minPrice_2" style="width: 80px;" type="hidden" name="minPrice" value="101" ><input class="maxPrice_2" style="width: 80px;" type="hidden" name="maxPrice" value="1000"></li>
			<li><input class="minPrice_3" style="width: 80px;" type="hidden" name="minPrice" value="1001" ><input class="maxPrice_3" style="width: 80px;" type="hidden" name="maxPrice" value="10000"></li>
			<li><input class="minPrice_4" style="width: 80px;" type="hidden" name="minPrice" value="10001" ><input class="maxPrice_4" style="width: 80px;" type="hidden" name="maxPrice" value="50000"></li>
		</ul>
	</div>
	</form>
</div>


<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));

	$(function() {
		
		savePrice();
		
		var currentYear = new Date().getFullYear();
		var historyYear = currentYear-10;
		
		var currentmonth = new Date().getMonth();
		currentmonth+=1;
		for(var i=0;i<20;i++){
			if(currentYear==historyYear){
				$("#year").append("<option value='"+historyYear+"' selected='selected' >"+historyYear+"年</option>" );
			}else{
				$("#year").append("<option value='"+historyYear+"' >"+historyYear+"年</option>" );
			}
			historyYear++;
		}
		
		for(var i=1;i<=12;i++){
			if(currentmonth==i){
				$("#month").append("<option value='"+i+"' selected='selected' >"+i+"月</option>" );
			}else{
				$("#month").append("<option value='"+i+"' >"+i+"月</option>" );
			}
		}
		
		
		$("#cycle_type").change(function(){
			if($(this).val()==1){
				$("#month").show();
			}else{
				$("#month").hide();
			}
		});
		//修改价格区间
		
		$("#dlg").click(function(){
		   	 layer.open({
		            title:"价格区间",//标题
		            maxmin :true,//右上角可否放大缩小
		            type:2,//弹框的类型
		            shade: [0.3, '#000'],//黑色背景
		            shadeClose:false,//黑色背景是否可以点击关闭
		            content:"${ctx}/shop/admin/goodsStatis/get_price_range_html.do",//内容的URL
		            area:['500px','320px'],//弹框大小
		            scrollbar: false,//是否允许浏览器出现滚动条
		            btn: ['确定', '取消'],
		            yes: function(index, layero){
		            	var minPrice_1 = layero.find("iframe").contents().find(".minPrice_1").val();
		            	var minPrice_2 = layero.find("iframe").contents().find(".minPrice_2").val();
		            	var minPrice_3 = layero.find("iframe").contents().find(".minPrice_3").val();
		            	var minPrice_4 = layero.find("iframe").contents().find(".minPrice_4").val();
		            	var maxPrice_1 = layero.find("iframe").contents().find(".maxPrice_1").val();
		            	var maxPrice_2 = layero.find("iframe").contents().find(".maxPrice_2").val();
		           		var maxPrice_3 = layero.find("iframe").contents().find(".maxPrice_3").val();
		           		var maxPrice_4 = layero.find("iframe").contents().find(".maxPrice_4").val();
		           		$(".minPrice_1").val(minPrice_1);
		           		$(".minPrice_2").val(minPrice_2);
		           		$(".minPrice_3").val(minPrice_3);
		           		$(".minPrice_4").val(minPrice_4);
		           		$(".maxPrice_1").val(maxPrice_1);
		           		$(".maxPrice_2").val(maxPrice_2);
		           		$(".maxPrice_3").val(maxPrice_3);
		           		$(".maxPrice_4").val(maxPrice_4);
		           		search_statis();
		                layer.close(index); //如果设定了yes回调，需进行手工关闭
		            },
		           btn2: function(index, layero){
 
		               //return false 开启该代码可禁止点击该按钮关闭
		           }
		      });
		});
		//分类选择
		 $('#cat_name').goodsCatsSelect({	
	            callback: function (cat) {
	               var cat_id = cat.cat_id;
	               var cat_name = cat.string;
	               $("#cat_name").val(cat_name);
	               $("#cat_id").val(cat_id);
	            }
	      });
		
	});
	
	
	function search_statis(){
		loadData();
		savePrice();
	}
	
	// 生成图表
	function moneyCharts(obj){
    var option = {
        title: {
        	x: 'center',
            text: '价格销量分布'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            magicType : {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
        xAxis: {
            data: [obj[0],obj[1],obj[2],obj[3]]
        },
        yAxis: {},
        series: [{
            name: '价格销量',
            type: 'line',
            data: [5, 20, 36, 10],
            itemStyle: {
                normal: {
                    color:'#7cb5ec',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            }
        }]
    };

    /** 使用刚指定的配置项和数据显示图表。*/
    myChart.setOption(option);
	}
	
	function savePrice(){
		var xprice = [];
		$("input[name='minPrice']").each(function(index, comment){
			var minp =  this.value;
			var maxp = $(this).parent().find("input[name='maxPrice']").val();
			xprice[index] = ""+minp+"元~"+maxp+"元";
		});
		moneyCharts(xprice);
		loadData();
	}
	
	//初始化数据
	function init() {
		//loadData();
	}
	
	function loadData(){
		
		var min_price="";
		var max_price="";
		$("input[name='minPrice']").each(function(index, comment){
			var minp =  this.value;
			var maxp = $(this).parent().find("input[name='maxPrice']").val();
			min_price = min_price+","+minp;
			max_price = max_price+","+maxp;
		});
		
		var year = $("#year :selected").val();
		var month = $("#month :selected").val();
		if(year==null){
			year = new Date().getFullYear();
			month = new Date().getMonth();
			month+=1;
		}
		
		var cat_id = $("input[name='cat_id']").val();
		var nums= new Array();
		var options = {
				url : "${ctx}/shop/admin/goodsStatis/get-price-sales-json.do?cat_id="+cat_id+"&year="+year+"&month="+month+"&minprice="+min_price+"&maxprice="+max_price,
				type : "post",
				dataType : 'json',
				success : function(data) {
					if (data.result == 1) {
						for(var i=0;i<data.data.length;i++){
				        	   nums[i]=data.data[i];
				            }
						myChart.setOption({
				           	series: [{
				                   data: nums
				               }]
				           });
					} else {
						alert(json.message);
					}
				}
			};
		$("#priceForm").ajaxSubmit(options);
	}

</script>



<#include '/admin/footer.html' >
